<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./echarts.min.js"></script>
<style>
    .box {
        width: 800px;
        height: 400px;
        border: 1px solid rgb(180, 248, 228);
    }
</style>

<body>
    <div class="box"></div>
</body>
<script>
    // 选择节点
    let dom = document.querySelector(".box")
    // 初始化
    let myChart = echarts.init(dom)
    let myColor = ["#ffdee9", "#dfdffa", "#ebdef3", "#d1edf9",]
    console.log(myChart);
    let option = {
        // 全局设置标签显示
        label:{
            show:false,
            position:"top"
        },
        title: {
            text: "傻子排行榜"
        },
        // 图例
        legend:{},
        xAxis: {
            type: 'category',  // 当前坐标轴为类目轴
            data: ["张三", "李四", "王五", "赵六"], //  类目轴显示的内容

            axisLabel:{   //    x轴文字标签
                color:"#dcc5ba"
            },
            axisTick:{   //  刻度线
                show:true,
                length:10,
                lineStyle:{
                    width:2
                },
                alignWithLabel:true,  //   刻度与标签对齐
            }
        },
        yAxis: {
            type: "value", //  当前坐标轴为数值轴
            //   是否显示Y轴实线
            axisLine: {
                show: true,   
            },
            // // y轴上的文字说明
            // axisLabel:{   
            //     show:true
            // }, 
            // grid里面的分割线
            splitLine:{
                show:true
            }
        },
        // 系列
        series: [
            {
                name:"2021",
                type: "bar",  //  柱状图
                data: [90, 220, 210, 190,],  //   柱状图的数据 
                barWidth: 20,  //  柱状图的宽度
                label:{   //  标签
                        show:true,  //  是否显示柱状图标签
                        position:"top",  //  标签位置
                        color:"#f0cfaf"   //  标签文字颜色
                    },
                itemStyle: {
                    // color:"blue",  //  柱子填充色：纯色

                    //   color:function(params){
                    //     return myColor[params.dataIndex]    //  让颜色变化   不同的颜色
                    //   },
                    color: {     //   渐变色  
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {
                          offset: 0, color:'#f8d8b2'   //   0%3的颜色
                        }, 
                        {
                           offset: 1, color:'#dedffa'  //   0%3的颜色
                        }
                        ]
                    }, 
                    //  圆角
                    borderRadius: [17, 17, 0, 0]
                },
            },
            {
                name:"2022",
                type: "bar",  //  柱状图
                barWidth: 20,  //  柱状图的宽度
                data: [70, 250, 280, 130,],  //   柱状图的数据 
                label:{
                        show:true,  //  是否显示柱状图标签
                        position:"top",  //  标签位置
                        color:"#ffe2ef"   //  标签文字颜色
                    },
                itemStyle: {
                    // color:"blue",  //  柱子填充色：纯色

                    //   color:function(params){
                    //     return myColor[params.dataIndex]    //  让颜色变化   不同的颜色
                    //   },
                    color: {     //   渐变色  
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {
                          offset: 0, color:'#ffdee9'   //   0%3的颜色
                        }, 
                        {
                           offset: 1, color:'#cef0fc'  //   0%3的颜色
                        }
                        ]
                    }, 
                    //  圆角
                    borderRadius: [17, 17, 0, 0]
                },
            },
        ],
        grid: {   //   网络相关   
            show: true,   //  显示网络
            width: 500,   //   显示整体宽度 
            borderWidth: 3,   //  网络边框宽度
            borderColor: "#cef5ff",  ///  网络边框的颜色
        },
    }

    //  使用配置项
    myChart.setOption(option) 
</script>

</html>